<template>
  <div>
    mock Test数据
    <div>欢迎你 <span v-if="user">{{user}}</span><span v-else>游客</span></div>
    <ul class="city_container">
      <li
        class="city_item"
        v-for="item in cityList"
        :key="item.id"
        @click="getCityInfo(item.city)"
      >
        <a href="javascript:void(0)" :style="{ color: item.color }">{{
          item.city
        }}</a>
      </li>
    </ul>
    <img :src="img" alt="" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="0"
     :immediate-check="false"
    >
      <van-cell
        v-for="item in rechargeList"
        :key="item.id"
        :title="item.title + item.id"
      />
    </van-list>
  </div>
</template>
<script>
import { City } from "../../mockApi/city";
import {User} from '../../mockApi/user';
import {Image} from '../../mockApi/image'
import {Recharge} from '../../mockApi/recharge'
export default {
  name: "test",
  components: {},
  data() {
    return {
      cityList: [],
      img: "",
      rechargeList: [],
      page: 1, // 分页
      page_size: 10, // 每页条数
      total: 0, // 数据总条数
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  mounted() {
    this.getCityList();
    this.getCityById();
    this.getRechargeList(); //需要执行一次
    User.login({username:'admin',password:'123456'}).then(res=>{
      console.log(res);
    })
  },
  computed:{
    user(){
      return this.$store.state.user;
    }
  },
  created(){
  },
  methods: {
    getCityById() {
      City.findCity({ type_id: 1 }).then((res) => {
        console.log(res);
      });
    },
    getCityList() {
      City.getAllCity().then((res) => {
        if (res.data) {
          this.cityList = res.data.cityList;
        }
      });
    },
    getCityInfo(name) {
      Image.getImage({ name }).then((res) => {
        if (res.data) {
          this.img = res.data.img;
        }
      });
    },
    getRechargeList() {
      this.loading = false; //关键代码
      Recharge.getRechargeList({ page: this.page, size: this.page_size }).then(
        (res) => {
          console.log('recharge--',res)
          let list = res.data.list;
          if (list.length == 0) {
            this.rechargeList = [];
            this.finished = true;
          }
          this.total = res.data.total;
          this.rechargeList = this.rechargeList.concat(list);
          if (this.rechargeList.length >= this.total) {
            this.finished = true;
          }else{
             this.page=this.page+1;
             this.finished=false;
          }
        }
      );
    },
    onLoad() {
      this.getRechargeList();
    },
  },
};
</script>
<style scoped>
</style>